<template>
  <div class="inbound-container">
    <el-form :inline="true" label-width="120px" :model="form">
      <el-form-item :label="translate('作业证单号') + '：'">
        <div class="item">{{ form.OPCMNo }}</div>
      </el-form-item>
      <el-form-item :label="translate('证件描述') + '：'">
        <div class="item">{{ form.OPCMName }}</div>
      </el-form-item>
      <el-form-item :label="translate('申请时间') + '：'">
        <div class="item">{{ form.OPCMDate }}</div>
      </el-form-item>
      <el-form-item :label="translate('申请人') + '：'">
        <div class="item">
          {{ form.Creator }}
        </div>
      </el-form-item>
      <el-form-item :label="translate('审核状态') + '：'">
        <div class="item">{{ form.AuditStatus }}</div>
      </el-form-item>
      <el-form-item :label="translate('审核时间') + '：'">
        <div class="item">{{ form.AuditDate }}</div>
      </el-form-item>
      <el-form-item :label="translate('备注') + '：'">
        <div class="item">{{ form.Remark }}</div>
      </el-form-item>
    </el-form>
    <el-table ref="multipleTable" border :data="tableData">
      <el-table-column label="序号" type="index" width="55" />
      <el-table-column :label="translate('员工编号')" prop="Account" />
      <el-table-column :label="translate('姓名')" prop="OPName" />
      <el-table-column :label="translate('单位')" prop="UnitName" />
      <el-table-column :label="translate('基层单位名称')" prop="BaseUnitName" />
      <el-table-column :label="translate('岗位')" prop="PostName" />
      <el-table-column
        :label="translate('岗位持证需要')"
        prop="PostCard"
      />
      <el-table-column :label="translate('是否持证')" prop="IsCard" />
      <el-table-column :label="translate('性别')" prop="Gender" />
      <el-table-column :label="translate('身份证号码')" prop="IDCard" />
      <el-table-column :label="translate('文化程度')" prop="EduLevel" />
      <el-table-column :label="translate('证书编号')" prop="CardNo" />
      <el-table-column :label="translate('发证机构')" prop="IA" />
      <el-table-column :label="translate('作业种类')" prop="OPType" />
      <el-table-column :label="translate('作业项目')" prop="OPProject" />
      <el-table-column :label="translate('证书有效起止时间')" prop="ValidityDate" />
      <el-table-column :label="translate('是否失效')" prop="IsExpired" />
      <el-table-column :label="translate('复审时间')" prop="AuditDate" />
      <el-table-column :label="translate('附件内容')" width="120">
            <template #default="{ row }">
              <el-image
                  v-if="row.UniqueUrl"
                  fit="contain"
                  :initial-index="9"
                  :preview-src-list="[row.UniqueUrl]"
                  :preview-teleported="true"
                  :src="row.UniqueUrl"
                  style="width: 60px; height: 60px"
                  :z-index="99999"
                  :zoom-rate="1.2"
                />
            </template>
          </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        :current-page="pageNo"
        :layout="'total, sizes, prev, pager, next, jumper'"
        :page-size="pageSize"
        :total="total"
        @current-change="handleCurrentchiled"
        @size-change="handleSizechiled"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { OperatorCardMasterDetail } from '@/api/baseInfo'
  import { translate } from '@/i18n'
  const props = defineProps<{
    id: string,
  }>()
  const form: any = ref({})
  const tableData: any = ref([])
  const id = props.id || ''
  const pageNo = ref(1)
  const pageSize = ref(10)
  const total = ref(0)
  const childData: any = ref([])
  const getTableData = async () => {
    const params = {
      pageNo: 1,
      pageSize: 100,
      total: 0,
      tableName: '',
      sort: '',
      order: '',
      wheres: '',
      export: true,
      value: id,
    }
    const data = await OperatorCardMasterDetail(params)
    if(data.rows && data.rows.length>0) {
      data.rows.map((item) => {
                if(item.ValidityDate&&item.ValidityDate.length>0){
                  item.ValidityDate = JSON.parse(item.ValidityDate)
                  item.ValidityDate = item.ValidityDate.join('至')
                  console.log(item.ValidityDate)
                }
              })
    }
    tableData.value = data.rows || []
    form.value = data.master || {}
    childData.value = data.extra || []

  }
  const handleCurrentchiled = (val: number) => {
    pageNo.value = val
  }
  const handleSizechiled = (val: number) => {
    pageSize.value = val
  }

  onMounted(() => {
    getTableData()
  })
</script>

<style lang="scss" scoped>
  .inbound-container {
    .item {
      width: 160px;
    }
    .mr10 {
      margin-right: 10px;
    }
    .colored {
      color: red;
    }
  }
</style>
